<template>
  <el-container>
    <!-- 导航栏 -->
    <el-header>
      <el-menu
        class="theader"
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
      >
          <!-- logo -->
        <img src="../../assets/logo.png"
             width="70px"
             height="70px"
             style="margin-left:15px;
                    margin-right:25px"
             alt="">
          <!-- 导航栏内容 -->
        <el-menu-item>
          首页
        </el-menu-item>
        <el-sub-menu index="11" class="my">
          <template #title>
            <img :src="user.imgUrl"
                 width="45px"
                 height="45px"
                 style="border-radius:50px;margin-right:20px"
                 alt="" v-if="user.imgUrl">
            <img src="../../assets/background.jpg"
                 width="45px"
                 height="45px"
                 style="border-radius:50px;margin-right:20px"
                 alt=""
                 v-else>
            {{ user.name }}</template>
          <el-menu-item index="11-1">......</el-menu-item>
          <el-menu-item index="11-2">信息</el-menu-item>
          <el-menu-item index="start" @click="logout">注销</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="220px" :span="12" >
        <!-- 侧边导航 -->
        <el-menu :default-active="sideIndex" class="ceBian"
          @open="handleOpen" @close="handleClose" router>
          <template v-for="menu,index in menus" :key="index">
            <el-sub-menu v-if="menu.menu.length > 0" :index="menu.id">
              <template #title>
                <el-icon :size="iconSize">
                  <component :is="menu.icon" />
                </el-icon>
                <span>{{ menu.name }}</span>
              </template>
              <el-menu-item v-for="minu, index in menu.menu" :key="index" :index="minu.jump" @click="handleClick(minu.name)">
                <el-icon :size="iconSize">
                  <component :is="minu.icon" />
                </el-icon>
                {{ minu.name }}
              </el-menu-item>
            </el-sub-menu>

            <el-menu-item v-else :index="menu.jump">
              <el-icon :size="iconSize">
                <component :is="menu.icon" />
              </el-icon>
              <span>{{ menu.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- 内容 -->
        <el-main class="neiRong">
          <el-breadcrumb :separator-icon="ArrowRight" style="margin-bottom: 10px">
            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="item.to">
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>


<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import { useUserStore } from '@/stores/user';
import { selectMenu } from '@/api/user';
import { ArrowRight } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';
import router from "@/router/index.js";

const userstore = useUserStore()
const user = userstore.user
const menus = ref(null)
const activeIndex = ref(null)
const sideIndex = ref(null)
const iconSize = ref(24)
const title = ref('首页')


const route = useRoute()
const breadcrumbList = computed(() => {
  const pathList = route.path.split('/').filter(Boolean); // 去掉空字符串
  const breadcrumbList = pathList.map((path, index) => {
    return {
      name: path.replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase()), // 转换为标题格式
      to: `/${pathList.slice(0, index + 1).join('/')}`
    }
  })
  return breadcrumbList
})

watch(route, () => {
  console.log('Route changed, breadcrumb updated');
})

const logout = () => {
  router.push('/start')
}

const handleTitleUpdate = (newTitle) => {
  title.value = newTitle;
}

const selectmenu = async () => {
  menus.value = (await selectMenu(user)).data.data
}

onMounted(() => {
  selectmenu();
  sideIndex.value = route.path 
  activeIndex.value = 1
})

const handleSelect = (index) => {
  activeIndex.value = index
}

const handleOpen = (index) => {
  console.log('open', index)
}

const handleClose = (index) => {
  console.log('close', index)
}

const handleClick = (title) => {
  handleTitleUpdate(title)
}
</script>



<style lang="scss" scoped>
.theader{
  width: 100%;
  height: 80px;
}
.el-header{
  position: fixed;
  top: 0;
  border-radius: 5px;
  width: 100vw;
  height: 80px;
  z-index: 50
}
//我的信息
.my{
  position: absolute;
  right: 0;
}
//侧边栏
.ceBian{
  padding-top: 80px;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
}
//内容
.neiRong{
  margin-top: 80px;
  height: 90vh;
  overflow-y: auto;
}
</style>